<template>
	<view>
		<view>
			<u-table>
				<u-tr class="u-tr">
					<u-th class="u-th">开奖时间</u-th>
					<u-th class="u-th">开奖期号</u-th>
					<u-th class="u-th" width="50%">中奖号码</u-th>
				</u-tr>
				<u-tr class="u-tr" v-for="(v,k) in ssqHistoryDataList" :key="v.id">
					<u-td class="u-td" v-text="v.public_date"></u-td>
					<u-td class="u-td" v-text="v.public_num"></u-td>
					<u-td class="u-td" width="50%">
						<view>
							<text v-for="(v1,k1) in getRedBall(v.red_ball)" style="background-color: red;border-radius: 50%;color: white;margin-left: 5rpx;margin-right: 5rpx;padding: 5rpx;">{{v1}}</text>
							<text style="background-color: blue;border-radius: 50%;color: white;padding: 5rpx;">{{v.blue_ball}}</text>
						</view>
					</u-td>
				</u-tr>
			</u-table>
		</view>
		<!-- 分页开始 -->
		<view class="pageBtns">
			<u-button type="success" size="mini" class="btn" @click="pageClick('pre')">上一页</u-button>
			<text>第{{page}}页</text>
			<u-button type="success" size="mini" class="btn" @click="pageClick('next')">下一页</u-button>
		</view>
		<!-- 分页结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg: '', //提示消息
				count: 0, //总共多少页
				page: 1, //第几页
				size: 18, //每页数量
				ssqHistoryDataList: []
			}
		},
		methods: {
			//获取红球数组
			getRedBall(redBall) {
				// console.log(redBall.split(','))
				let redBallList = redBall.split(",")
				let redBallListTemp = []
				for (var i = 0; i < redBallList.length; i++) {
					let temp = parseInt(redBallList[i])
					if (temp > 9) {
						redBallListTemp.push('' + temp)
					} else {
						redBallListTemp.push('0' + temp)
					}
				}
				return redBallListTemp;
			},
			//点击上一页和下一页
			pageClick(btn) {
				switch (btn) {
					case 'pre':
						if (this.page - 1 > 0) {
							this.page = this.page - 1
						} else {
							this.msg = '已经是第一页了'
						}
						break;
					case 'next':
						if (this.page + 1 < (this.count - 1) / this.size + 2) {
							this.page = this.page + 1
						} else {
							this.msg = '已经是最后一页了'
						}
						break;
				}
				// console.log('当前是第几页: ', this.page)
				//请求中奖历史数据
				uni.request({
					url: 'http://127.0.0.1:8000/ssq/api/v1/history/page', //仅为示例，并非真实接口地址。
					data: {
						page: this.page,
						size: this.size
					},
					header: {},
					success: (res) => {
						// console.log(res.data)
						this.count = parseInt(res.data.count)
						this.ssqHistoryDataList = res.data.data
					}
				});
			}
		},
		onLoad() {
			//初始化历史中奖数据
			uni.request({
				url: 'http://127.0.0.1:8000/ssq/api/v1/history/page', //仅为示例，并非真实接口地址。
				data: {
					page: this.page,
					size: this.size
				},
				header: {},
				success: (res) => {
					this.count = parseInt(res.data.count)
					this.ssqHistoryDataList = res.data.data
				}
			});
		}
	}
</script>
<style>
	.pageBtns {
		text-align: center;
	}

	.pageBtns>.btn {
		margin: 20rpx;
	}
</style>
